<template>
  <div>
    <!-- 搜索栏 -->
    <search-bar :options="searchBarOptions" style="padding-top:0;" />

    <!--分割线-->
    <!-- <div class="line"></div> -->
    <div class="box-total">
      <div class="card">
        <div class="title_medium">{{ $t('m.orderRevenue') }}</div>
        <div class="titl_large">
          {{ total.orderRevenueAmount | amountFormat }}
        </div>
      </div>
      <div class="card">
        <div class="title_medium">{{ $t('m.couponAmount') }}</div>
        <div class="titl_large">
          {{ total.discountAmount | amountFormat }}
        </div>
      </div>
      <div class="card">
        <div class="title_medium">
          {{ $t('m.Order_refundAmount') }}
        </div>
        <div class="titl_large">{{ total.refundAmount | amountFormat }}</div>
      </div>
    </div>
    <!-- 表格栏 -->
    <div class="table-box">
      <!--表格-->
      <fast-table :options="fastTableOptions" :data="page.records" />
      <!-- 分页 -->
      <pagination
        :total="page.total"
        :current="page.current"
        :size="page.size"
        @changePageSize="changePageSize"
        @changePageNum="changePageNum"
      />
    </div>
  </div>
</template>
<script>
import page from '@/mixins/page'
import FastTable from '@/components/fast-table.vue'
import SearchBar from '@/components/search-bar.vue'
import Pagination from '@/components/pagination.vue'

export default {
  components: { Pagination, SearchBar, FastTable },
  mixins: [page],
  data () {
    return {
      // 财务概览类型: 1-累计 2-今天
      type: 1,

      total: {
        orderRevenueAmount: 0,
        discountAmount: 0,
        refundAmount: 0
      },

      fastTableOptions: {
        columns: [
          {
            label: this.$t('m.Payment_date'),
            prop: 'payTime',
            formatter: row => this.$format.dateformat(row.payTime)
          },
          {
            label: this.$t('m.Order_List_OrderID'),
            prop: 'orderNo'
          },

          {
            label: this.$t('m.Order_amount'),
            prop: 'orderAmount',
            formatter: row => this.$format.amountFormat(row.orderAmount)
          },
          {
            label: this.$t('m.couponAmount'),
            prop: 'discountAmount',
            formatter: row => this.$format.amountFormat(row.discountAmount)
          },
          {
            label: this.$t('m.platformDiscount'),
            prop: 'plateCouponAmount',
            formatter: row => this.$format.amountFormat(row.plateCouponAmount)
          },
          {
            label: this.$t('m.totalOrderAmount'),
            prop: 'totalAmount',
            formatter: row => this.$format.amountFormat(row.totalAmount)
          },
          {
            label: this.$t('m.Order_refundAmount'),
            prop: 'refundAmount',
            formatter: row => this.$format.amountFormat(row.refundAmount)
          },
          {
            label: this.$t('m.roundingAdjustmentAmount'),
            prop: 'adjustAmount',
            formatter: row => this.$format.amountFormat(row.adjustAmount, true)
          },
          {
            label: this.$t('m.paidAmount'),
            prop: 'actualPaymentAmount',
            formatter: row => this.$format.amountFormat(row.actualPaymentAmount)
          },
          {
            label: this.$t('m.orderRevenue'),
            prop: 'orderRevenue',
            formatter: row => this.$format.amountFormat(row.orderRevenue)
          }
        ]
      }
    }
  },
  created () {
    this.getSearch()
    this.getPage()
  },
  methods: {
    getSearch () {
      this.searchBarOptions = {
        search: this.search,
        bars: [
          {
            value:'',
            type: 'input',
            prop: 'search',
            placeholder: this.$t('m.Order_List_OrderID')
          },
          {
            value:'',
            type: 'datePicker',
            prop: 'rangeTime',
            label: this.$t('m.Payment_date')
          }
        ]
      }
    },
    getTotal () {
      this.$api.order.getTotalFinanceOverviewOrder(this.params).then(res => {
        if (this.$ok(res) && res.data) {
          this.total = res.data
        }
      })
    },
    getPage () {
      this.getTotal()
      this.$api.order.getPageFinanceOverviewOrder(this.params, this.page).then(res => {
        if (this.$ok(res)) {
          this.page = res.data
        }
      })
    }
  }
}
</script>
<style scoped lang="scss">
.container {
  .box-total {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 8px 20px 0 20px;

    .card {
      min-width: 220px;
      background: #ffffff;
      border: 1px solid #d2d8e2;
      border-radius: 6px;
      padding: 20px 24px;
      margin-right: 20px;

      .title_medium {
        font-size: 14px;
        text-align: left;
        color: #39404d;
        line-height: 20px;
        margin-bottom: 4px;
      }
      .titl_large {
        font-size: 20px;
        font-weight: 600;
        text-align: left;
        color: #39404d;
        line-height: 24px;
      }
    }
  }
}
</style>
